<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="light dark">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sandbox Status</title>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
    <style type="text/css">
      #sandbox-status {
        border: 1px solid gray;
      }
      #sandbox-status td {
        border: 1px solid gray;
        padding: 3px;
        vertical-align: top;
      }
      #evaluation {
        font-weight: bold;
      }
      .good {
        background-color: rgb(143, 218, 146);
      }
      .bad {
        background-color: rgb(249, 156, 149);
      }
      .medium {
        background-color: rgb(255, 255, 90);
      }
      .info {
        background-color: rgb(169, 217, 239);
      }
<if expr="is_win">
      .expander {
        display: inline;
        padding-right: 1em;
      }
      .mitigations {
        display: inline;
        font-family: monospace;
      }
</if>
    </style>
    <script type="module" src="sandbox_internals.js"></script>
  </head>
  <body>
    <h1>Sandbox Status</h1>

    <table id="sandbox-status">
    </table>
    <p id="evaluation"></p>
<if expr="is_win">
    <pre id="raw-info"></pre>
</if>
  </body>
</html>
